import * as React from 'react';
import { AppRegistry,
    StyleSheet,
    Text,
    View,
    Slider,
    ViewPagerAndroid,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';
import CommonCell from "./CommonCell"
export default class More extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                {/**导航条**/}
                {this.renderNavBar()}
                <ScrollView>
                    {/**第一组，扫一扫**/}
                    <View style={{marginTop:15}}>
                        <CommonCell title='扫一扫' />
                    </View>
                    {/**第二组，第一个，省流量模式**/}
                    <View style={{marginTop:15}}>
                        <CommonCell title='省流量模式' isSwitch={true} />
                        <CommonCell title='消息提醒' />
                        <CommonCell title='夜间模式' />
                        <CommonCell title='清空缓存' rightTitle='180M' />
                    </View>
                    {/**第三组，第一个，省流量模式**/}
                    <View style={{marginTop:15}}>
                        <CommonCell title='意见反馈' />
                        <CommonCell title='问卷调查' />
                        <CommonCell title='支付帮助' />
                        <CommonCell title='网络诊断' />
                        <CommonCell title='团购券' />
                        <CommonCell title='我要应聘' />
                    </View>
                    {/**第三组，第一个，省流量模式**/}
                    <View style={{marginTop:15}}>
                        <CommonCell title='精品应用' />
                        <CommonCell title='更多。。。' />
                    </View>
                </ScrollView>
            </View>
        );
    }
    //返回导航条
    renderNavBar(){
        return(
            <View style={styles.navOuterView}>
                <Text style={{color:'white',fontSize:17, fontWeight:"900"}}>更多</Text>
                <TouchableOpacity style = {styles.navRightImagePressStyle} onPress={()=>{alert('点击了图片')}}>
                    <Image source={require('../../assets/alart.png')} style={styles.navRightImageStyle} />
                </TouchableOpacity>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    navRightImageStyle:{
        width:24,
        height:24,
    },
    navRightImagePressStyle:{
        //图片进行绝对定位
        position:'absolute',
        right:20,
        bottom:15
    },
    navOuterView:{
        height:60,
        backgroundColor:'#FF3C25',
        flexDirection:'row',
        alignItems:'center',  //侧轴的方向是垂直居中
        //主轴方向居中
        justifyContent:'center'
    }
});
//Z自定义组件封装导出
module.exports = More
